<div class="account-main-section main-height">
    <div class="channel-content text-white">
        <h3 class="channel-content-header text-white">{{language=="en"?'AUTHENTICATION':''}}{{language=="zh"?'实名认证':''}}</h3>
        <div class="text-center " style="background: none; border: 0px;">
            <div class="row" style="margin-bottom: 4%;">
                <div class="col-md-2 col-xs-12"></div>
                <div class="col-md-7 col-xs-12 ">
                    <div class="row">
                        <div class="col-md-4 col-xs-12 text-center" style="margin-top: 8px;">
                            <label class="control-label" i18n>{{language=="en"?'Name':''}}{{language=="zh"?'姓名':''}}:</label>
                        </div>
                        <div class="col-md-8 col-xs-12">
                            <input class="my_input form-control" type="text" [(ngModel)]="realname.name" #realName="ngModel" name="realName" placeholder="{{language=='en'?'Please enter your realname':''}}{{language=='zh'?'请填写您的真实姓名':''}}" i18n-placeholder required="required"/>
                            <div *ngIf="realName.invalid && (realName.dirty || realName.touched)" class="alert alert-danger">
                                <div *ngIf="realName.errors.required"i18n>
                                    {{language=="en"?'Name is required!':''}}{{language=="zh"?'姓名不能为空':''}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12"></div>
            </div>
            <div class="row" style="margin-bottom: 4%;">
                <div class="col-md-2 col-xs-12"></div>
                <div class="col-md-7 col-xs-12">
                    <div class="row">
                        <div class="col-md-4 col-xs-12 text-center" style="margin-top: 8px;">
                            <label i18n>{{language=="en"?'ID Number':''}}{{language=="zh"?'证件号':''}}:</label>
                        </div>
                        <div class="col-md-8 col-xs-12">
                            <input class="my_input form-control" type="text" [(ngModel)]="realname.idNumber" #realIdnumber="ngModel" name="realIdnumber" placeholder="{{language=='en'?'Please enter your ID Number':''}}{{language=='zh'?'请填写您的证件号码':''}}" i18n-placeholder required="required"/>
                            <div *ngIf="realIdnumber.invalid && (realIdnumber.dirty || realIdnumber.touched)" class="alert alert-danger">
                                <div *ngIf="realIdnumber.errors.required" i18n>
                                    {{language=="en"?'IdNumber is required!':''}}{{language=="zh"?'证件号不能为空':''}}
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12"></div>
            </div>
            <div class="row" style="margin-bottom: 4%;">
                <div class="col-md-2 col-xs-12"></div>
                <div class="col-md-7 col-xs-12">
                    <div class="row">
                        <div class="col-md-4 col-xs-12 text-center" style="margin-top: 8px;">
                            <label i18n>{{language=="en"?'Nationality':''}}{{language=="zh"?'国籍':''}}:</label>
                        </div>
                        <div class="col-md-8 col-xs-12">
                            <div class="input-group">
                                <select class="form-control my_input"  required="required" [(ngModel)]="realname.country" #realCountry="ngModel" name="realModel">
                                    <option i18n selected="selected">{{language=="en"?'please select':''}}{{language=="zh"?'请选择':''}}</option>
                                    <option *ngFor="let country of countries" value="{{country.en}}">{{language=='en'?country.en:''}}{{language=='zh'?country.cn:''}}</option>
                                </select>
                            </div><!-- /input-group -->
                            <div *ngIf="realCountry.invalid && (realCountry.dirty || realCountry.touched)" class="alert alert-danger">
                                <div *ngIf="realCountry.errors.required" i18n>
                                    {{language=="en"?'Country is required!':''}}{{language=="zh"?'国籍不能为空':''}} 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12 "></div>
            </div>
            <div class="row">
                <div class="col-md-2 col-xs-12"></div>
                <div class="col-md-7 col-xs-12">
                    <div class="row">
                        <div class="col-md-4 col-xs-12 text-center" style="margin-top: 8px;">
                            <label i18n>{{language=="en"?'Photo':''}}{{language=="zh"?'证件照':''}}:</label>
                        </div>
                        <div class="col-md-8 col-xs-12">
                            <form enctype="multipart/form-data">
                                <div>
                                    <input type="file" [ngClass]="{'hide': !!realname.credentials}" #file (change)="fileOnChange($event, file, 'credentials')" class="inputFile my_input form-control">
                                    <input type="hidden" name="credentials" [(ngModel)]="realname.credentials" required="required">
                                    <img *ngIf="realname && realname.credentials" src="{{realname.credentials}}" style="width:20%;cursor:pointer;" alt="" (click)="changeImage(file)">
                                </div>
                            </form>
                        </div>
                        <span style="color: #8e969a;" i18n>{{language=="en"?'The document must be a clear and original electronic version. It can be a scanning piece or digital photograph. Please upload a photo with the suffix named JPG/PNG. The maximum size of the photo is 2M':''}}{{language=="zh"?'该文件必须是清晰且原始的电子版本。它可以是扫描件或数码照片。请上传名为JPG / PNG后缀的照片。照片的最大尺寸是2M':''}}</span>
                        <span i18n style="color: #d95959" *ngIf="user&&user.attestation&&user.attestation.state === 2">{{language=="en"?'The information you provided is incorrect，please resubmit it':''}}{{language=="zh"?'您提供的信息不正确，请重新提交':''}}</span>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12"></div>
            </div>
            <div class="row">
                <div class="col-md-2 col-xs-12"></div>
                <div class="col-md-7 col-xs-12">
                    <div class="row mt-50">
                        <div class="col-md-12 col-xs-12">
                            <button class="btn btn-block btn-primary" (click)="submitReal()" i18n>{{language=="en"?'Submit':''}}{{language=="zh"?'提交':''}}</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12"></div>
            </div>
        </div>
    </div>

</div>